<template>
<!--  组件的结构-->
  <div >
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{ myName }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ age }}</h2>
    <button @click="updateName">尝试修改收到的名字</button>
  </div>
</template>
<script>
//组件交互相关的代码（数据、方法等等）
//   const school=Vue.extend(options)可以简写为 const school=options
export default {
  name:'Student',
  // props:['name','sex','age'],  //简单声明接收

  // 接受的同时对数据进行类型限制
 /* props:{
    name:String,
    sex:String,
    age:Number
  },*/

  // 接受的同时对数据进行类型限制+默认值的指定+必要性的限制
  props:{
    name:{
      type:String,//name的类型是字符串
      required:true//name是必要的
    },
    age:{
      type:Number,
      default:99//默认值
    },
    sex:{
      type:String,
      default: '男'
    }
  },

  data() {
    return {
      msg:'我是一个学生',
      myName:this.name
    }
  },

  methods:{
    updateName(){
      this.myName='王五'
    }
  }
}
</script>
<style>
/*组件的样式*/

</style>